<template>
  <view>
    <el-row :gutter="20">
      <el-col :span="4">用户名</el-col>
      <el-col :span="16">{{ user.username }}</el-col>
    </el-row>
    <el-row :gutter="20" v-if="user.mobile">
      <el-col :span="4">手机号</el-col>
      <el-col :span="16">{{ user.mobile }}</el-col>
    </el-row>
    <el-row :gutter="20" v-if="user.email">
      <el-col :span="4">邮箱</el-col>
      <el-col :span="16">{{ user.email }}</el-col>
    </el-row>
    <el-row :gutter="20" v-if="user.school">
      <el-col :span="4">学校</el-col>
      <el-col :span="16">{{ user.school }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">参与过的活动</el-col>
      <el-col :span="16">
        <unicloud-db
            ref="udb" collection="project-activity-info, project-activity"
            :where="`user_id=='${user._id}'`"
            field="user_id,activityId{name}" v-slot:default="{data,loading,error}"
        >
          <ul v-if="data.length>0" class="active_list">
            <li v-for="(item,index) in data" class="active_list-item" :key="index" v-if="item.activityId.length>0">
              {{item.activityId[0].name}}
            </li>
          </ul>
          <view v-else>暂未参加过活动</view>
        </unicloud-db>
      </el-col>
    </el-row>
  </view>
</template>

<script>
export default {
  name: "UserInfoDisplay",
  props: {
    user: {
			type:Object,
			default:()=>({})
		}
  },
  data() {
    return {};
  }
}
</script>

<style lang="scss">
.active_list {
  width: 100%;
  display: flex;
  list-style: none;
  padding: 0;

  &-item {
    padding: 3px;
    border: 1px solid #333;
    margin: 0 5px 5px 0;
  }
}
</style>
